import { defineComponent } from 'vue';
import './index.less';
import {
  NavBar,
  PullRefresh,
  Tabbar,
  TabbarItem,
  Toast,
  showFailToast,
  showToast
} from 'vant';
import { getUserInfo } from '@/api/home';
import Synthesis from '../components/mobile/Synthesis';
import Sale from '../components/mobile/Sale';
import MyKpi from '../components/mobile/MyKpi';
import GroupPerformance from '../components/mobile/Performance';
import Return from '../components/mobile/Return';
import Product from '../components/mobile/Product';
import GroupKpi from '../components/mobile/GroupKpi';
import Complaint from '../components/mobile/Complaint';
import MyItem from '../components/mobile/Item/my';
import CompanyItem from '../components/mobile/Item/company';
import { generateAvatarByName } from '@/utils';
import { ElAvatar } from 'element-plus';
import Trophy from '../components/pc/Trophy';
import Welfare from '../components/pc/Welfare';
import Punish from '../components/pc/Punish';
import Study from '../components/pc/Study';
import dd from 'dingtalk-jsapi';
export default defineComponent({
  name: 'MHomev2',
  setup() {
    const { VITE_STATIC_URL } = import.meta.env;
    const active = ref(0);
    const loading = ref(false);
    const router = useRouter();
    const tabs = [
      {
        active: 'company_active',
        inactive: 'company'
      },
      {
        active: 'personal_active',
        inactive: 'personal'
      }
    ];
    const userInfo = ref() as AnyObject;
    getUserInfo(2).then((res) => {
      userInfo.value = res.data;
      console.log(userInfo.value);
    });
    const handleRefresh = () => {
      loading.value = true;
      // const start = active.value;
      // active.value = 2;
      setTimeout(() => {
        // active.value = start;
        loading.value = false;
      });
    };
    const share = () => {
      try {
        dd.biz.util.share({
          type: 0, //分享类型，0:全部组件 默认；1:只能分享到钉钉；2:不能分享，只有刷新按钮
          url: 'https://h5.mythinkcar.cn/vueh5/homepage/index',
          title: 'TCPI',
          content:
            'TCPI是星卡科技的个人洞察平台，致力于让每个员工在公司愿景下一起努力，实现公司和个人的共同发展。',
          image: `${import.meta.env.VITE_STATIC_URL}/icon_pi.png`
        });
      } catch (error) {
        console.log(error);
      }
    };
    return () => (
      <div class="mhome">
        <NavBar
          title="TCPI"
          left-arrow
          safe-area-inset-top
          fixed
          placeholder
          onClickLeft={() => dd.biz.navigation.close({})}
          v-slots={{
            right: () => (
              <div class="flex-start">
                <div onClick={() => router.push('/homepage/profile')}>
                  <ElAvatar
                    size={25}
                    src={
                      userInfo.value?.avatar ||
                      generateAvatarByName(userInfo.value?.name || '')
                    }
                  />
                </div>
                <div onClick={share} class="bar_more">
                  ...
                </div>
              </div>
            )
          }}
        />
        {/* <button
          onClick={() => {
            localStorage.clear();
            location.reload();
          }}
        >
          清缓存
        </button> */}
        {userInfo.value && (
          <PullRefresh v-model={loading.value} onRefresh={handleRefresh}>
            {active.value === 0 && (
              <div class="wrap">
                <div class="wrap_item">
                  <Sale userInfo={userInfo.value} />
                </div>
                <div class="wrap_item">
                  {(userInfo.value.column?.includes('4') ||
                    userInfo.value.column?.includes('5') ||
                    userInfo.value.column?.includes('6')) && (
                    <GroupPerformance column={userInfo.value.column} />
                  )}
                </div>
                <div class="wrap_item">
                  {userInfo.value.column?.includes('8') && <CompanyItem />}
                </div>
                <div class="wrap_item">
                  {userInfo.value.column?.includes('7') && <MyItem />}
                </div>
                <div class="wrap_item">
                  <MyKpi />
                </div>
                <div class="wrap_item">
                  <Return type="small" />
                </div>
                <div class="wrap_item">
                  <Complaint />
                </div>
                <div class="wrap_item">
                  <Product />
                </div>
                <div class="wrap_item">
                  <GroupKpi />
                </div>
              </div>
            )}
            {active.value === 1 && (
              <div class="wrap">
                <div class="wrap_item">
                  <Synthesis userInfo={userInfo.value} />
                </div>
                <div class="wrap_item">
                  <Study />
                </div>
                <div class="wrap_item">
                  <Trophy />
                </div>
                <div class="wrap_item">
                  <Welfare />
                </div>
                <div class="wrap_item">
                  <Punish />
                </div>
              </div>
            )}
          </PullRefresh>
        )}
        <Tabbar v-model={active.value} safe-area-inset-bottom>
          {tabs.map((tab) => (
            <TabbarItem
              v-slots={{
                icon: (props: any) => (
                  <img
                    src={`${VITE_STATIC_URL}/tcpl/${
                      props.active ? tab.active : tab.inactive
                    }.png`}
                  />
                )
              }}
            />
          ))}
        </Tabbar>
      </div>
    );
  }
});
